<template>
  <div style="width: 100%;height: 100%;box-sizing: border-box;padding: 1em;">
    <el-scrollbar height="100%">
      <el-row style="height: 3rem;" :gutter="20">
        <el-col :span="4">
          <el-input v-model="search" placeholder="输入筛选参数" :prefix-icon="Search" />
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="searchClick">搜索</el-button>
        </el-col>
        <el-col :span="16"></el-col>
        <el-col :span="2">
          <el-button type="primary" plain @click="formShow = true">新增</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column v-for="item in props" align="center" v-bind="item" />
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button type="primary" plain @click="detailClick(scope.row)">详情</el-button>
            <el-popconfirm @confirm="deleteTo(scope.row.id)" title="你确定要删除吗?">
              <template #reference>
                <el-button type="danger" plain>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="currentChange" sk-flex="row-end" background layout="prev, pager, next"
        :total="total" />
    </el-scrollbar>
  </div>
  <Form v-model="formShow"></Form>
  <DetailForm :solid-data="detailData" v-if="detailformShow" v-model="detailformShow"></DetailForm>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { type solid, getByPage, deleteSolid } from '@/api/map'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import Form from './Form.vue'
import DetailForm from './detailForm.vue'
interface propInterface {
  prop: string,
  label: string,
  width?: string
}
const props: Array<propInterface> = [
  {
    prop: 'name',
    label: '点位名'
  }, {
    prop: 'areaName',
    label: '地区',
  }, {
    prop: 'lon',
    label: '纬度'
  },
  {
    prop: 'lat',
    label: '经度'
  }, {
    prop: 'createTime',
    label: '创建时间'
  }, {
    prop: 'checkTime',
    label: '检查时间'
  }
]
const formShow = ref<boolean>(false)
const search = ref('')
const detailformShow = ref<boolean>(false)
const total = ref<number>(0)
const tableData = ref<solid[]>()
const pageNum = ref<number>(1)
async function getAsyncTable (number: number = 1) {
  let res = await getByPage({ pageNum: number, pageSize: 10, search: search.value })
  tableData.value = res.data.records
  total.value = res.data.total
}
const detailData = ref<solid>()

async function currentChange (num: number) {
  pageNum.value = num
  getAsyncTable(num)
}
const searchClick = () => {
  pageNum.value = 1
  getAsyncTable(pageNum.value)
}
const detailClick = (para: solid) => {
  detailData.value = para
  detailformShow.value = true
}
const deleteTo = async (id: number) => {
  let res: any = await deleteSolid(id)
  if (res.code === '200') {
    ElMessage.success("删除成功")
    getAsyncTable(pageNum.value)
  }
}
onMounted(async () => {
  getAsyncTable()
})

</script>
<style lang="scss" scoped>
:deep(.el-table__row td:first-of-type) {
  font-size: 0.9em;
  color: #077ef6;
}
</style>